import { styled } from '@mui/material/styles';
import { Button } from '@mui/material';

// Extracted styled component with its complete styling
const StyledButton = styled(Button)(({ theme }) => {
  const isDark = theme.palette.mode === 'dark';

  return {
    borderRadius: '12px',
    margin: isDark ? '4px 0' : 0,
    padding: '6px 10px',
    fontSize: '1.1rem',
    fontWeight: 500,
    color: isDark ? '#e0e0e0' : '#1a1a1a',
    background: isDark
      ? 'linear-gradient(145deg, rgba(33, 33, 33, 0.85), rgba(0, 2, 3, 0.8))'
      : 'linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(223, 227, 238, 0.7))',
    boxShadow: isDark
      ? '0px 1px 5px 2px rgba(33,33,33,0.5), 0px 0px 10px 4px rgba(0,2,3,0.4)'
      : '0px 1px 10px 2px rgba(255,255,255,0.9), 0px 0px 10px 4px rgba(223,227,238,0.7)',
    backdropFilter: 'blur(6px)',
    WebkitBackdropFilter: 'blur(6px)',
    transition: 'all 0.25s ease-in-out',

    '&:hover': {
      background: isDark
        ? 'linear-gradient(135deg, rgba(0,2,3,0.9), rgba(33,33,33,0.85))'
        : 'linear-gradient(135deg, rgba(223,227,238,0.9), rgba(255,255,255,0.95))',
      boxShadow: isDark
        ? '0px 1px 10px 2px rgba(33,33,33,0.6), 0px 0px 12px 4px rgba(0,2,3,0.5)'
        : '0px 1px 10px 2px rgba(255,255,255,0.95), 0px 0px 12px 4px rgba(223,227,238,0.8)',
      color: '#00fff2',
      textShadow: '0 0 8px #00fff2',
    },

    '&:focus': {
      color: '#00fff2',
      textShadow: '0 0 8px #00fff2',
    }
  };
});

export default StyledButton;

